<template>
  <div class="echart" ref="chartDom" id="chart"></div>
</template>

<script setup lang="ts" scoped>
import { init } from 'echarts'
import { ref, onMounted, watch } from 'vue'
const myChart = ref<any>(null)
const props = defineProps({
  options: {
    type: Object,
    default: {},
    required: true,
  },
})

onMounted(() => {
  myChart.value = init(document.getElementById('chart') as HTMLDivElement)
  myChart.value.setOption(props.options, true)
})
watch(
  () => props.options,
  (newOptions) => {
    myChart.value.setOption(newOptions)
  },
  {
    deep: true,
  }
)
</script>

<style scoped>
.echart {
  width: 800px;
  height: 500px;
}
</style>
